<template>
  <div class="container">
    <div class="com-news">
      <img
        src="@/assets/images/news/logo8.jpg"
        alt="modification"
        style="width: 100%; height: 360px"
      />
    </div>
    <div class="tab-tit">
      <p>
        <b>{{ $t("content.NewsCenter") }}</b>
      </p>
      <span
        >{{ $t("content.Location") }} ->
        <a href="http://www.tzmc.com/newsInformation">{{
          $t("content.NewsCenter")
        }}</a>
      </span>
    </div>
    <div class="tab-menu">
      <el-tabs
        :tab-position="tabPosition"
        style="height: 940px"
        @tab-change="change"
      >
        <el-tab-pane id="abc" :label="$t('content.All')">
          <ul class="news-ul">
            <div v-for="item in this.postsList[0]" :key="item.id">
              <li class="news-li">
                <router-link :to="'/details/' + item.id">{{
                  item.titlezh
                }}</router-link>
                <span>{{ item.time.substring(0, 10) }}</span>
              </li>
            </div>
            <el-pagination
              small
              background
              layout="prev, pager, next"
              :current-page.sync="currentPage"
              :total="totalSum"
              class="mt-4"
              @prev-click="prevPage"
              @next-click="nextPage"
              @current-change="handleCurrentChange"
            />
          </ul>
        </el-tab-pane>
        <el-tab-pane :label="$t('content.Company')">
          <ul class="news-ul">
            <div v-for="item in this.postsList[1]" :key="item.id">
              <li class="news-li">
                <router-link :to="'/details/' + item.id">{{
                  item.titlezh
                }}</router-link>
                <span>{{ item.time.substring(0, 10) }}</span>
              </li>
            </div>
            <el-pagination
              small
              background
              layout="prev, pager, next"
              :current-page.sync="currentPage"
              :total="totalCompany"
              class="mt-4"
              @prev-click="prevPage"
              @next-click="nextPage"
              @current-change="handleCurrentChange"
            />
          </ul>
        </el-tab-pane>
        <el-tab-pane :label="$t('content.Industry')">
          <ul class="news-ul">
            <div v-for="item in this.postsList[2]" :key="item.id">
              <li class="news-li">
                <router-link :to="'/details/' + item.id">{{
                  item.titlezh
                }}</router-link>
                <span>{{ item.time.substring(0, 10) }}</span>
              </li>
            </div>
            <el-pagination
              small
              background
              layout="prev, pager, next"
              :current-page.sync="currentPage"
              :total="totalIndustry"
              class="mt-4"
              @prev-click="prevPage"
              @next-click="nextPage"
              @current-change="handleCurrentChange"
            />
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, ref } from "vue";
import axios from "axios";
export default {
  data() {
    return {
      page: 1,
      tabPosition: "top",
      postsList: [],
      poot: [],
      totalSum: null,
      totalCompany: null,
      totalIndustry: null,
      clientWidth: document.body.clientWidth,
    };
  },
  created() {
    this.getPostData();
    window.addEventListener("resize", this.chartResize, false);
  },
  beforeDestory() {
    window.removeEventListener('resize', this.chartResize)
  },
   methods: {
     chartResize() {
      const that = this;
      that.clientWidth = document.body.clientWidth;
      if (that.clientWidth < 720) {
        that.tabPosition = "top";
      } else {
        that.tabPosition = "left";
      }
    },
    getPostData(i = 1) {
      let page = i;
      axios.get("api/api/new?page=" + page).then((res) => {
        console.log(res.data);
        // this.postsList = []
        this.postsList = [res.data[0].data, res.data[1].data, res.data[2].data];
        console.log(this.postsList);
        this.totalSum = 10 * res.data[0].last_page;
        console.log(res.data[0].last_page);
        this.totalCompany = 10 * res.data[1].last_page;
        this.totalIndustry = 10 * res.data[2].last_page;
      });
    },
    handleCurrentChange(i) {
      this.getPostData(i);
    },
    change() {
      this.page = 1;
      this.getPostData();
    },
  },
};
</script>
<style src="../assets/css/newsinformation.css" scoped>
</style>